
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>

</head>
<style>
    .aa{
        align-content: center
    }
</style>

<body>

    <div id="app">

        <el-button
                style="background-color: black;color: white"
                type="primary"
                @click="showAddBookDialog()"
        >
            + 添加书籍
        </el-button>

        <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
                  @keyup.enter="handleSearch"></el-input>
        <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
            <el-option label="按书名搜索" value="name"></el-option>
            <el-option label="按作者搜索" value="author"></el-option>
            <el-option label="按分类搜索" value="type"></el-option>
            <el-option label="按书籍号搜索" value="bid"></el-option>
            <el-option label="所有书籍" value="all"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="text-center sorting">书籍名</th>
                <th class="text-center sorting">封面</th>
                <th class="text-center sorting">书籍号</th>
                <th class="text-center sorting">作者</th>
                <th class="text-center sorting">入库数量</th>
                <th class="text-center sorting">入库时间</th>
                <th class="text-center sorting">出版社</th>
                <th class="text-center sorting">分类类型</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(book,index) in books" >
                <td class="text-center sorting aa">{{book.name}}</td>
                <td class="text-center sorting aa"><img v-bind:src="book.imgpath" height="80px" width="50px"></td>
                <td class="text-center sorting aa">{{book.bid}}</td>
                <td class="text-center sorting aa">{{book.author}}</td>
                <td class="text-center sorting aa">{{book.num}}本</td>
                <td class="text-center sorting aa">{{book.storage_time}}</td>
                <td class="text-center sorting aa">{{book.press}}</td>
                <td class="text-center sorting aa">{{book.type}}</td>

            </tr>
            </tbody>
        </table>

            <el-dialog
                title="添加书籍"
                :visible.sync="addBookDialogVisible"
                width="50%"
                @close="resetAddBookForm"
        >
            <!-- 新增书籍表单内容 -->
            <el-form :model="addBookForm" ref="addBookForm" label-width="80px">

                <el-row>
                    <el-row>
                    <el-col :span="12">
                        <el-form-item label="书籍名" prop="name" :rules="[
            { required: true, message: '书籍名不能为空', trigger: 'blur' }
        ]">
                            <el-input v-model="addBookForm.name" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="作者" prop="author" :rules="[
            { required: true, message: '作者不能为空', trigger: 'blur' }
        ]">
                            <el-input v-model="addBookForm.author" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出版社" prop="press" :rules="[
            { required: true, message: '出版社不能为空', trigger: 'blur' }
        ]">
                                <el-input v-model="addBookForm.press" style="width: 200px"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="分类" prop="type" :rules="[
            { required: true, message: '请选择分类', trigger: 'blur' }
        ]">
                                <el-select v-model="addBookForm.type">
                                    <el-option
                                            v-for="category in bookCategories"
                                            :key="category.tid"
                                            :label="category.name"
                                            :value="category.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="封面" prop="img">
                                <img v-bind:src="addBookForm.imgpath" width="150px" height="200px">
                                <br> <br>
                                <el-upload
                                        ref="upload"
                                        class="upload-demo"
                                        action="/upload"
                                        :show-file-list="false"
                                        :on-success="handleSuccess"
                                        :before-upload="beforeUpload"
                                        :max-size="5021"
                                        :limit="1"
                                        name="myfile"
                                >
                                    <el-button size="small" type="primary" @click="manualUpload">手动上传</el-button>
                                    <div slot="tip" class="el-upload__tip">一次只能上传一个png文件，且不超过5M</div>
                                </el-upload>

                            </el-form-item>
                        </el-col>


                        <el-col :span="12">
                            <el-form-item label="数量" prop="num" :rules="[
                { required: true, message: '请输入数量', trigger: 'blur' }
            ]">
                                <el-input v-model="addBookForm.num" type="number" style="width: 200px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
            </el-form>

            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
            <el-button @click="addBookDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitAddBookForm">提交</el-button>
            <el-button type="primary" @click="submitAndContinue">提交并继续添加</el-button>
             </span>
        </el-dialog>



        <el-dialog
                title="增加书籍库存"
                :visible.sync="updateBookDialogVisible"
                width="50%"
                @close="resetAddBookForm"
        >
            <!-- 修改书籍表单内容 -->
            <el-form :model="addBookForm" ref="addBookForm" label-width="80px">
                <el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="书籍名" prop="name" :rules="[
            { required: true, message: '书籍名不能为空', trigger: 'blur' }
        ]">
                                <el-input v-model="addBookForm.name" style="width: 200px" disabled></el-input>
                            </el-form-item>
                        </el-col>


                        <el-col :span="12">
                            <el-form-item label="作者" prop="author" :rules="[
            { required: true, message: '作者不能为空', trigger: 'blur' }
        ]">
                                <el-input v-model="addBookForm.author" style="width: 200px" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出版社" prop="press" :rules="[
            { required: true, message: '出版社不能为空', trigger: 'blur' }
        ]">
                                <el-input v-model="addBookForm.press" style="width: 200px" disabled></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="分类" prop="type" :rules="[
            { required: true, message: '请选择分类', trigger: 'blur' }
        ]">
                                <el-select v-model="addBookForm.type" disabled>
                                    <el-option
                                            v-for="category in bookCategories"
                                            :key="category.tid"
                                            :label="category.name"
                                            :value="category.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="封面" prop="img" >
                                <img v-bind:src="addBookForm.imgpath" width="150px" height="200px">
                                <br> <br>
                                <el-upload
                                        ref="upload"
                                        class="upload-demo"
                                        action="/upload"
                                        :show-file-list="false"
                                        :on-success="handleSuccess"
                                        :before-upload="beforeUpload"
                                        :max-size="5021"
                                        :limit="1"
                                        name="myfile"
                                        disabled
                                >
                                    <el-button size="small" type="primary" @click="manualUpload" disabled>手动上传</el-button>
                                    <div slot="tip" class="el-upload__tip">一次只能上传一个png文件，且不超过5M</div>
                                </el-upload>

                            </el-form-item>
                        </el-col>


                        <el-col :span="12">
                            <el-form-item label="数量" prop="num" :rules="[
                { required: true, message: '请输入数量', trigger: 'blur' }
            ]">
                                <el-input v-model="addBookForm.num" type="number" style="width: 200px"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
            </el-form>

            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
            <el-button @click="updateBookDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUpdateBookForm">提交</el-button>
             </span>
        </el-dialog>




        <!--    class="pageList"-->
        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">
                    总共{{pages}} 页，共{{total}} 条数据。 每页
                    <select class="form-control" v-model="meiye">
                        <option>5</option>
                        <option>10</option>
                        <option>15</option>
                        <option>20</option>
                        <option>50</option>
                        <option>80</option>
                    </select> 条
                </div>
            </div>

            <div class="box-tools pull-right">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                    </li>
                    <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                    <li v-for="index in (pages>=7)?(7):(pages)"
                        class="paginate_button">
                        <a href="#" @click="goPage(index)">{{index}}</a></li>
                    <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

                </ul>
            </div>

        </div>


    </div>

</body>

    <script>
        var idsArr=[];
        new Vue({
            el: '#app',
            data() {
                return {
                    books:[],
                    searchText:null,
                    searchType:"",
                    total: "",
                    pages: "",
                    pageNum: "",
                    size: "",
                    meiye:10,
                    addBookForm: {
                        bid: '',
                        name: '',
                        imgpath:'',
                        card: '',
                        author: '',
                        num: '1',
                        press: '',
                        type: ''
                    },
                    addBookDialogVisible:false,//控制新增表单不显示
                    updateBookDialogVisible:false,//控制修改表单不显示
                    bookCategories:[]
                }
            },
            computed: {},
            created() {
                // this.init()
                //this.user = JSON.parse(localStorage.getItem('userInfo')).username
            },
            mounted(){
                this.selcetbooks()//查询所有
                this.getBookType()//获取所有书籍类型

            },

            methods: {
                handleSuccess(response, file, fileList) {
                    // 文件上传成功的回调
                    console.log(response);
                },
                beforeUpload(file) {
                    var _this=this;
                    // 在上传之前的钩子，返回 false 可以取消上传

                    //判断文件类型是否是jpg png
                    var url = file.name;//获取文件名
                    var FileExt=url.replace(/.+\./,"");//获取文件后缀
                    if (FileExt=='jpg'||FileExt=='png'){
                        //发请求开始上传
                        const formData = new FormData();
                        formData.append('myfile', file);

                        axios({
                            method:'post',
                            url:'/web/admin/uploadServlet',
                            data:formData
                        }).then(function (reps){
                           _this.addBookForm.imgpath=reps.data;
                        })

                        this.handleSuccess();
                    }else{
                        this.$message.error('请选择jpg/png格式的图片')
                    }


                },
                manualUpload() {
                    // 手动触发文件上传
                    this.$refs.upload.submit();
                },
                boxChoose(brand){
                    //checkbox被选中
                    if(brand.isChecked){
                        idsArr.push(brand.bid);//往数组添加指定元素
                    }else{//checkbox被取消
                        var index = idsArr.indexOf(brand.bid);
                        if (index !== -1) {
                            idsArr.splice(index, 1);//删除指定元素
                        }
                    }
                    console.log(idsArr);
                },
                deleteAll(){
                    var _this=this;
                    if (idsArr.length==0){
                        _this.$message.error('请选择要删除的书本！');
                    }
                        else{
                        _this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
                            'confirmButtonText': '确定',
                            'cancelButtonText': '取消',
                            'type': 'warning'
                        }).then(() => {
                            var ids=idsArr.join(",");//将数组转为字符串
                            // 页面加载完成后，发送异步请求，查询数据
                            axios({
                                method: "get",
                                url: "/web/admin/deleteBooksById?ids=" + ids
                            }).then(function (resp) {
                                if (resp.data==1){
                                    _this.selcetbooks()
                                    _this.$message.success('批量删除成功！');
                                }else{
                                    _this.$message.error( '批量删除失败！');
                                }

                            })
                        })
                    }


                },
                getBookType(){
                    var _this=this;
                    axios({//获取所有书籍分类信息
                        method:"get",
                        url:"/web/selectallBookType"
                    }).then(function(resp){
                        _this.bookCategories=resp.data;
                    })

                },
                selcetbooks(){//查询所有
                    var _this=this;
                    axios({//获取所有书籍信息
                        method:"get",
                        url:"/web/selectallBookStorage"
                    }).then(function(resp){
                        _this.books=resp.data.list;
                        _this.total = resp.data.total;
                        _this.pages = resp.data.pages;
                        _this.pageNum = resp.data.pageNum;
                        _this.size = resp.data.size;
                    })
                },
                resetAddBookForm() {
                    this.$refs['addBookForm'].resetFields(); // 重置添加书籍表单
                },
                showAddBookDialog(){//点击添加书籍之后 新增表单显示出来
                     this.addBookForm.imgpath='';
                    this.addBookDialogVisible=true;
                },
                deleteBook(bid){
                },
                updateBook(bid){
                    this.updateBookDialogVisible=true;
                    var _this=this;
                    axios({
                        method:"post",
                        url:"/web/admin/finBookId?bid="+bid,
                    }).then(function (resp){
                        _this.addBookForm=resp.data;
                    })
                },

                handleSearch(){
                    var json={
                        "text":this.searchText,
                        "type":this.searchType
                    };
                    var jsonstr = JSON.stringify(json);
                    var _this=this;
                    axios({
                        method:"post",
                        url:"/web/selectallBookStorage3",
                        data:jsonstr
                    }).then(function(resp){
                        _this.books = resp.data.list;
                        _this.total = resp.data.total;
                        _this.pages = resp.data.pages;
                        _this.pageNum = resp.data.pageNum;
                        _this.size = resp.data.size;
                    })
                },
                goPage(index) {
                    var _this = this;
                    // 页面加载完成后，发送异步请求，查询数据
                    var a={
                        "page":index,
                        "text":this.searchText,
                        "type":this.searchType
                    }
                    var json = JSON.stringify(a);
                    axios({
                        method: "post",
                        url: "http://localhost:8080/web/selectallBookStorage2",
                        data:json
                    }).then(function (resp) {
                        _this.books = resp.data.list;
                        _this.total = resp.data.total;
                        _this.pages = resp.data.pages;
                        _this.pageNum = resp.data.pageNum;
                        _this.size = resp.data.size;
                    })
                },
                goPage(index) {
                    var _this = this;
                    // 页面加载完成后，发送异步请求，查询数据
                    var a={
                        "size":this.meiye,
                        "page":index,
                        "text":this.searchText,
                        "type":this.searchType
                    }
                    var json = JSON.stringify(a);
                    axios({
                        method: "post",
                        url: "http://localhost:8080/web/selectallBookStorage2",
                        data:json
                    }).then(function (resp) {
                        _this.books = resp.data.list;
                        _this.total = resp.data.total;
                        _this.pages = resp.data.pages;
                        _this.pageNum = resp.data.pageNum;
                        _this.size = resp.data.size;
                    })
                },
                submitUpdateBookForm(){
                    this.$refs['addBookForm'].validate(valid => {
                        if (valid) {
                            // console.log(this.addBookForm)
                            // 向服务器发送 POST 请求以添加新书籍
                            axios.post("/web/admin/updateBook", this.addBookForm)
                                .then(res => {
                                    if (res.data == 1) {
                                        // 添加成功，关闭对话框并重新加载数据
                                        this.updateBookDialogVisible = false;
                                        this.selcetbooks();
                                        this.$message.success('修改书籍成功！');
                                    } else {
                                        // 添加失败，显示错误信息
                                        this.$message.error( '修改书籍失败！');
                                    }
                                })
                                .catch(err => {
                                    // 请求失败，显示错误信息
                                    this.$message.error('请求出错了：' + err);
                                });
                        } else {
                            // 表单校验不通过，不执行提交操作
                            return false;
                        }
                    });
                },
                submitAddBookForm() {//提交按钮
                    this.$refs['addBookForm'].validate(valid => {
                        if (valid) {
                            // console.log(this.addBookForm)
                            // 向服务器发送 POST 请求以添加新书籍
                            axios.post("/web/admin/addBook", this.addBookForm)
                                .then(res => {
                                    if (res.data == 1) {
                                        // 添加成功，关闭对话框并重新加载数据
                                        this.addBookDialogVisible = false;
                                        this.selcetbooks();
                                        this.$message.success('添加书籍成功！');
                                    } else {
                                        // 添加失败，显示错误信息
                                        this.$message.error( '添加书籍失败！');
                                    }
                                })
                                .catch(err => {
                                    // 请求失败，显示错误信息
                                    this.$message.error('请求出错了：' + err);
                                });
                        } else {
                            // 表单校验不通过，不执行提交操作
                            return false;
                        }
                    });
                },
                submitAndContinue() {
                    this.$refs['addBookForm'].validate(valid => {
                        if (valid) {
                            axios.post("/web/admin/addBook", this.addBookForm)
                                .then(res => {
                                    if (res.data == 1) {
                                        this.$message.success('添加书籍成功！');
                                        this.resetAddBookForm(); // 清空表单内容
                                        this.handleQuery();
                                    } else {
                                        this.$message.error(res.data.msg || '添加书籍失败！');
                                    }
                                })
                                .catch(err => {
                                    this.$message.error('请求出错了：' + err);
                                });
                        } else {
                            return false;
                        }
                    });
                },
                handleQuery() {
                    this.pages = 1;
                    this.selcetbooks();
                },
            }
        })
    </script>


</html>